<template>
    <div>
        <p>KGG21300001</p>
        <p>KGG213</p>

        <div style="border: 1px solid black; width: 600px;height: 150px;">
            <span>使用自定义custom-input</span>

<CustomInput @receiveCustomInputVar="displayCustomInputVar"></CustomInput>
        </div>
        

        <p>KGG213</p>
        <p>KGG213</p>
       

        <p>显示子组件输入的值:  {{searchText3}}</p>
        <p>KGG213</p>
        <p>KGG213</p>
        <p>KGG213</p>
        <p>KGG213</p>
        <p>KGG213</p>
       
        <div v-for="n in 9">
            <b v-for="m in n">
                {{m}}*{{n}}={{m*n}} &nbsp;
            </b>
        </div>
        
        <p>KGG213</p>
        <p>KGG213</p>
        <p>KGG213</p>
        <p>KGG213</p>
        <p>KGG213</p>
        <p>KGG213</p>
    </div>
</template>
<script>
import CustomInput from "@/components/CustomInput.vue";
export default {
    name: "PersonalManage",
    components: {
        CustomInput
    },
    data() {
        return {
            groceryList: [
                { id: 0, text: '蔬菜' },
                { id: 1, text: '奶酪' },
                { id: 2, text: '随便其它什么人吃的东西' }
            ],
            searchText3: ''

        }
    },
    methods:{
        displayCustomInputVar(data){
            console.log('---recv---evt----value:',data)
            this.searchText3 = data
        }
    }
}
</script>